<%@page import="com.baozun.util.CommonConst"%>
<%@page import="com.baozun.model.TUser"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Static &amp; Dynamic Tables" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- basic styles -->

<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" />

<!--[if IE 7]>
		  <link rel="stylesheet" href="../assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

<!-- page specific plugin styles -->

<!-- fonts -->

<!-- link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" /-->
<link rel="stylesheet" href="../assets/css/font.css" />

<!-- ace styles -->

<link rel="stylesheet" href="../assets/css/ace.min.css" />
<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />

<!--[if lte IE 8]>
		  <link rel="stylesheet" href="../assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->

<script src="../assets/js/ace-extra.min.js"></script>
</head>
<%
TUser user = (TUser)session.getAttribute(CommonConst.SESSION_USER);
String stFriendId = request.getParameter("stFriendId");
String stUserIdTo = request.getParameter("stUserIdTo");
%>
<body>
	<input type="hidden" id="chatId" value="<%=stFriendId%>"/>
	<input type="hidden" id="stUserIdFrom" value="<%=user.getStUserId() %>"/>
	<input type="hidden" id="stUserIdTo" value="<%=stUserIdTo%>"/>
	<div class="row">
	<textarea id="chat_record" rows="5" cols="50">
		<div class="col-xs-12">
			<div class="modal_box">
				<dl class="tc_text">
					<dt>姓名</dt>
					<dd><input type="text" class="text_sm" name="stContactName" id="stContactName"/></dd>
				</dl>
				<dl class="tc_text">
					<dt>单位(<font color="red">*</font>)</dt>
					<dd><input type="text" class="text_sm" name="stUnitName" id="stUnitName"/></dd>
				</dl>
			</div>
		</div>
	</div>
	</textarea>
	<input id="chat_input" type="text" class="" />
	<button id="send" onclick="sendChat()" disabled="disabled">发送</button>
</body>
<script src="../assets/js/jquery-2.0.3.min.js"></script>
<script src="../js/websocket/sockjs-0.3.4.js"></script>
<script src="../js/websocket/stomp.js"></script>
<script src="../js/websocket/jquery.websocket-0.0.1.js"></script>
<script src="../js/websocket/jquery.json-2.2.min.js"></script>
<script>
	var socket = new SockJS('../coordination');
	var stompClient = Stomp.over(socket);
	var chatId = $("#chatId");
	stompClient.connect('', '', function(frame) {
		$("#send").removeAttr("disabled");
		stompClient.subscribe('/chat/chat' + chatId, function (chat){
            showChat(JSON.parse(chat.body));
        });
	});
	
	function showChat(message){
		$("#chat_record").val(decodeURIComponent(message.stChatContent));
		
	}
	var stUserIdFrom = $("#stUserIdFrom").val();
	var stUserIdTo = $("#stUserIdTo").val();

	//发送聊天信息
	function sendChat() {
		var input = $('#chat_input');
		var inputValue = input.val();
		//input.val("");
		stompClient.send("/app/sendChat", {}, JSON.stringify({
			'address':"/chat/chat"+chatId,
			'stUserIdFrom' : stUserIdFrom,
			'stUserIdTo' : stUserIdTo,
			'stChatContent' : encodeURIComponent(inputValue)
			})
		);
	}
</script>
</html>